<template>
  <div>
    <!-- 配镜参数 -->
    <el-divider :id="`region_${props.regionId}`">
      {{ props.title }}
    </el-divider>
    <table class="region_data">
      <thead>
        <tr>
          <th class="set_bg">
            {{ props.title }}
          </th>
          <th class="title_bg">瞳高</th>
          <th class="title_bg">瞳距</th>
          <th class="title_bg">前倾角</th>
          <th class="title_bg">镜腿长</th>
          <th class="title_bg">镜眼距</th>
          <th class="title_bg">脸宽</th>
          <th class="title_bg">鼻宽</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>OD</th>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_rightPupillaryHeight`)
            "
          >
            <el-input
              v-model="data_form.rightPupillaryHeight"
              placeholder="请输入右眼瞳高"
              :data-field="`${props.regionId}_rightPupillaryHeight`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue == `${props.regionId}_rightPupillaryHeight`
              "
            />
            <span v-else>
              <span v-if="data_form.rightPupillaryHeight">
                {{ data_form.rightPupillaryHeight }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_rightPupillaryDistance`)
            "
          >
            <el-input
              v-model="data_form.rightPupillaryDistance"
              placeholder="请输入右眼瞳距"
              :data-field="`${props.regionId}_rightPupillaryDistance`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue == `${props.regionId}_rightPupillaryDistance`
              "
            />
            <span v-else>
              <span v-if="data_form.rightPupillaryDistance">
                {{ data_form.rightPupillaryDistance }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            :rowspan="2"
            @dblclick="handleDbClickFocus(`${props.regionId}_frontRake`)"
          >
            <el-input
              v-model="data_form.frontRake"
              placeholder="请输入前倾角"
              :data-field="`${props.regionId}_frontRake`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_frontRake`"
            />
            <span v-else>
              <span v-if="data_form.frontRake">
                {{ data_form.frontRake }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            :rowspan="2"
            @dblclick="handleDbClickFocus(`${props.regionId}_templeLength`)"
          >
            <el-input
              v-model="data_form.templeLength"
              placeholder="请输入镜腿长"
              :data-field="`${props.regionId}_templeLength`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_templeLength`"
            />
            <span v-else>
              <span v-if="data_form.templeLength">
                {{ data_form.templeLength }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            :rowspan="2"
            @dblclick="
              handleDbClickFocus(`${props.regionId}_mirrorEyeDistance`)
            "
          >
            <el-input
              v-model="data_form.mirrorEyeDistance"
              placeholder="请输入镜眼距"
              :data-field="`${props.regionId}_mirrorEyeDistance`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_mirrorEyeDistance`"
            />
            <span v-else>
              <span v-if="data_form.mirrorEyeDistance">
                {{ data_form.mirrorEyeDistance }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            :rowspan="2"
            @dblclick="handleDbClickFocus(`${props.regionId}_wideFace`)"
          >
            <el-input
              v-model="data_form.wideFace"
              placeholder="请输入脸宽"
              :data-field="`${props.regionId}_wideFace`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_wideFace`"
            />
            <span v-else>
              <span v-if="data_form.wideFace">
                {{ data_form.wideFace }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            :rowspan="2"
            @dblclick="handleDbClickFocus(`${props.regionId}_noseBridgeWidth`)"
          >
            <el-input
              v-model="data_form.noseBridgeWidth"
              placeholder="请输入鼻宽"
              :data-field="`${props.regionId}_noseBridgeWidth`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_noseBridgeWidth`"
            />
            <span v-else>
              <span v-if="data_form.noseBridgeWidth">
                {{ data_form.noseBridgeWidth }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <th>OS</th>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_leftPupillaryHeight`)
            "
          >
            <el-input
              v-model="data_form.leftPupillaryHeight"
              placeholder="请输入左眼瞳高"
              :data-field="`${props.regionId}_leftPupillaryHeight`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_leftPupillaryHeight`"
            />
            <span v-else>
              <span v-if="data_form.leftPupillaryHeight">
                {{ data_form.leftPupillaryHeight }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_leftPupillaryDistance`)
            "
          >
            <el-input
              v-model="data_form.leftPupillaryDistance"
              placeholder="请输入左眼瞳距"
              :data-field="`${props.regionId}_leftPupillaryDistance`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue == `${props.regionId}_leftPupillaryDistance`
              "
            />
            <span v-else>
              <span v-if="data_form.leftPupillaryDistance">
                {{ data_form.leftPupillaryDistance }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";

onMounted(() => {
  // console.log(props);
});

const emit = defineEmits(["handleDbClickFocus", "handleDbClickBlur"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  regionId: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: String,
    default: "",
  },
  dbClickPlaceholder: {
    type: String,
    default: "",
  },
});
const data_form = ref({}); // 数据

// 双击聚焦
const handleDbClickFocus = (ElementName) => {
  emit("handleDbClickFocus", ElementName);
  nextTick(() => {
    // 添加nextTick确保DOM更新后执行
    document.querySelector(`input[data-field="${ElementName}"]`)?.focus();
  });
};

// 失去焦点
const handleDbClickBlur = () => {
  emit("handleDbClickBlur", {
    regionId: props.regionId,
    data: data_form.value,
  });
};

let cleanup;
onMounted(() => {
  cleanup = watchStorage("refresh_region_data", (e) => {
    data_form.value = e.data.optometrist_query_data;
  });

  // 组件卸载时清理监听
  return () => cleanup();
});

onBeforeUnmount(() => {
  cleanup();
});
</script>

<style scoped lang="scss">
.title_bg {
  @apply w-[12.1%];
}
</style>